Math Formulas and Notations in HTML & CSS

By Faraz - June 15, 2024

Learn how to write and style mathematical formulas and notations using HTML and CSS. Discover techniques for creating accessible and visually appealing math content on web pages.

Join us on Telegram

$math-formulas-and-notations-in-html-and-css.webp$

Read Also Crossy Road Game Clone HTML CSS JavaScript.jpg

Create a Crossy Road Game Clone with HTML, CSS, and JavaScript

Mathematical formulas and notations are essential for conveying complex information clearly and precisely. Traditionally, math content has been challenging to display on web pages. However, with advancements in HTML and CSS, it's now possible to present math in a clean and readable format. This guide will explore how to write and style mathematical formulas using HTML and pure CSS. Whether you're a web developer, educator, or student, you'll find valuable insights to enhance your web content.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our mathematical formulas and expressions.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Below is a detailed explanation of the code:

HTML Structure

1. Document Type and Language

<!DOCTYPE html>
<html lang="en">

<!DOCTYPE html> declares the document type as HTML5.
<html lang="en"> specifies that the language of the document is English.

2. Head Section

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mathematical Formulas</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<meta charset="UTF-8" /> sets the character encoding to UTF-8.
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> ensures compatibility with Internet Explorer.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> sets the viewport to make the webpage responsive.
<title>Mathematical Formulas</title> sets the title of the webpage.
<link rel="stylesheet" href="styles.css" /> links an external CSS file (styles.css) for styling.

3. Body Section

<body>

The <body> tag encloses the main content of the webpage.

Mathematical Formulas and Expressions

4. Quadratic Formula

<div class="math showcase">
  x = <span class="frac">
    <span> - b ± <span class="sqrt">b<sup>2</sup> - 4ac</span></span>
    <span>2a</span>
  </span>
</div>

This block displays the quadratic formula.
class="math showcase" applies styles to make the formula visually appealing.
class="frac" and class="sqrt" style the fraction and square root portions of the formula, respectively.

5. Braces (Parentheses, Square Brackets, Curly Braces)

<div class="math showcase">
  braces = 
  <span class="surround round"><span class="frac"><span>round</span><span>is usual</span></span></span> + 
  <span class="surround square"><span class="frac"><span>square</span><span>matrix?</span></span></span> + 
  <span class="surround curly"><span class="frac"><span>curly</span><span>much better</span></span></span>
</div>

This block displays different types of braces.
class="surround round", class="surround square", and class="surround curly" style the parentheses, square brackets, and curly braces, respectively.

6. Summation Formula

<div class="math showcase">
  <span class="cs">
    <sup>n</sup>
    <span class="big">∑</span>
    <sub>i = 0</sub>
  </span>
  i<sup>3</sup>
  = <span class="surround round"><span class="frac"><span>n(n+1)</span><span>2</span></span></span>
</div>

This block displays a summation formula.
class="cs" styles the summation symbol and its limits.
class="big">∑ applies specific styling to the summation symbol.
class="surround round" styles the fraction within parentheses.

7. Vector

<div class="math showcase">
  <span class="arrow">vector</span> = <span class="surround round vec"><span>1</span><span>2</span><span>-3</span></span>
</div>

This block displays a vector.
class="arrow" and class="surround round vec" style the text "vector" and the vector elements, respectively.

8. Matrix

<div class="math showcase">
  matrix = <span class="surround square matrix" style="--c: 3">
    <span>1</span><span>2</span><span>3</span>
    <span>4</span><span>5</span><span>6</span>
    <span>7</span><span>8</span><span>9</span>
  </span>
</div>

This block displays a 3x3 matrix.
class="surround square matrix" styles the matrix with square brackets.
style="--c: 3" sets a CSS variable to define the number of columns.

9. System of Equations

<div class="math showcase">
  <span class="surround sys matrix" style="--c: 5">
    <span>3x</span><span>+</span><span>5y</span><span>=</span><span>3</span>
    <span>7z</span><span>-</span><span>42x</span><span>=</span><span>6</span>
    <span>33y</span><span>-</span><span>z</span><span>=</span><span>9</span>
  </span>
</div>

This block displays a system of equations.
class="surround sys matrix" styles the system of equations.
style="--c: 5" sets a CSS variable to define the number of columns in the matrix.

Closing Tags

</body>
</html>

These tags close the <body> and <html> elements, indicating the end of the HTML document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mathematical Formulas</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
<div class="math showcase">
  x = <span class="frac">
    <span> - b ± <span class="sqrt">b<sup>2</sup> - 4ac</span></span>
    <span>2a</span>
  </span>
</div>

<div class="math showcase">
  braces = 
  <span class="surround round"><span class="frac"><span>round</span><span>is usual</span></span></span> + 
  <span class="surround square"><span class="frac"><span>square</span><span>matrix?</span></span></span> + 
  <span class="surround curly"><span class="frac"><span>curly</span><span>much better</span></span></span>
</div>

<div class="math showcase">
  <span class="cs">
    <sup>n</sup>
    <span class="big">∑</span>
    <sub>i = 0</sub>
  </span>
  i<sup>3</sup>
  = <span class="surround round"><span class="frac"><span>n(n+1)</span><span>2</span></span></span>
</div>

<div class="math showcase">
  <span class="arrow">vector</span> = <span class="surround round vec"><span>1</span><span>2</span><span>-3</span></span>
</div>

<div class="math showcase">
  matrix = <span class="surround square matrix" style="--c: 3">
    <span>1</span><span>2</span><span>3</span>
    <span>4</span><span>5</span><span>6</span>
    <span>7</span><span>8</span><span>9</span>
  </span>
</div>

<div class="math showcase">
  <span class="surround sys matrix" style="--c: 5">
    <span>3x</span><span>+</span><span>5y</span><span>=</span><span>3</span>
    <span>7z</span><span>-</span><span>42x</span><span>=</span><span>6</span>
    <span>33y</span><span>-</span><span>z</span><span>=</span><span>9</span>
  </span>
</div>
  </body>
</html>

Read Also

Create a World Holiday Search Engine using HTML, CSS, and JavaScript

Step 2 (CSS Code):

Here's a detailed explanation of each part:

1. Font Import

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;400&display=swap&text=∑');

These lines import the 'Roboto Slab' font from Google Fonts with weights 200 and 400.
The second import specifies that the character '∑' should also be included.

2. Body Styling

body {
  background: #1f1d2b;
  color: #FFF;
  font-family: 'Roboto Slab', serif;
}

Sets the background color of the body to a dark shade (#1f1d2b).
Sets the text color to white (#FFF).
Applies the 'Roboto Slab' font to the entire body.

3. Showcase Class

.showcase {
  padding: 15px;
  text-align: center;
  position: relative;
}

Adds padding of 15px.
Centers the text.
Sets the position to relative, allowing for absolute positioning of child elements.

4. Math Fractions

.math .frac {
  display: inline-flex;
  vertical-align: middle;
  flex-direction: column;
  text-align: center;
  margin-top: -1px;
}
.math .frac > *:first-child {
  border-bottom: 2px solid currentColor;
  padding-bottom: 5px;
}
.math .frac > *:last-child {
  padding-top: 5px;
}
.math .frac > * {
  padding: 0 0.5em;
}

.frac sets up a vertical flex container for fractions.
The first child has a bottom border to represent the fraction line.
The padding creates spacing between the fraction elements.

5. Math Square Root

.math .sqrt {
  border-top: 2px solid currentColor;
  margin-left: 10px;
  padding-left: 5px;
  position: relative;
  display: inline-block;
}
.math .sqrt::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -10px;
  bottom: 0px;
  width: 10px;
  background: currentColor;
  clip-path: polygon(
    0 50%,
    2px 50%,
    50% calc(100% - 2px),
    calc(100% - 2px) 0,
    100% 0,
    100% 2px,
    calc(50% + 2px) 100%,
    calc(50% - 2px) 100%,
    0 calc(50% + 2px)
  );
}

.sqrt creates a styled square root symbol.
::before uses a clip-path to create the square root symbol before the content.

6. Surround Class

.surround {
  padding: 0 10px;
  position: relative;
  display: inline-block;
  --round: 5px;
  --off: 0;
}
.surround::before, .surround::after {
  content: '';
  width: 5px;
  position: absolute;
  top: 0px;
  bottom: 0px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  border-top-left-radius: var(--round);
  border-bottom-left-radius: var(--round);
}
.surround::after {
  right: var(--off);
  border-right: 2px solid currentColor;
  border-top-right-radius: var(--round);
  border-bottom-right-radius: var(--round);
}

.surround creates a bordered box around content with customizable rounded corners (--round) and offset (--off).
::before and ::after create the left and right borders with top and bottom borders.

7. Additional Surround Variants

.surround.round {
  --round: 10px 30px;
}
.surround.square {
  --round: 0;
}
.surround.curly {
  --round: 10px;
  --off: 5px;
  padding: 0 15px;
  background-image: 
    linear-gradient(0deg, currentColor 25%, currentColor 25%),
    linear-gradient(0deg, currentColor 25%, currentColor 25%);
  background-repeat: no-repeat;
  background-size: 5px 2px;
  background-position: 0 center, 100% center;
}
.surround.sys {
  --round: 10px;
  --off: 5px;
  padding: 0 15px;
  background-image: 
    linear-gradient(0deg, currentColor 25%, currentColor 25%);
  background-repeat: no-repeat;
  background-size: 5px 2px;
  background-position: 0 center;
}
.surround.sys::after {
  content: unset;
}

.round, .square, .curly, and .sys modify the --round and --off properties for different border styles.
.curly and .sys add background images to create additional visual effects.

8. Combined Superscript and Subscript

.cs {
  position: relative;
  display: inline-block;
}
.cs > sup {
  position: absolute;
  bottom: calc(100% - 10px);
  left: 50%;
  transform: translate(-50%);
  width: max-content;
}
.cs > sub {
  position: absolute;
  top: calc(100% - 5px);
  left: 50%;
  transform: translate(-50%);
  width: max-content;
}

.cs allows positioning of both superscript (sup) and subscript (sub) elements.
The position properties ensure these elements are centered and placed correctly.

9. Big Class

.big {
  font-size: 2em;
  font-weight: 200;
}

.big increases the font size and sets a lighter font weight.

10. Arrow Class

.arrow {
  position: relative;
}
.arrow::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 5px);
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
}
.arrow::after {
  content: '';
  position: absolute;
  bottom: calc(100% - 1px);
  right: -1px;
  height: 5px;
  width: 5px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform-origin: top right;
  transform: rotate(45deg);
}

.arrow creates an arrow symbol using pseudo-elements for the line and arrowhead.

11. Vector Class

.surround.vec {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
}

.vec styles vectors with inline flex for vertical alignment.

12. Matrix Class

.matrix {
  display: inline-grid;
  grid-template-columns: repeat(var(--c), 1fr);
  grid-gap: 5px;
  padding: 5px 15px;
  vertical-align: middle;
}

.matrix uses a grid layout to display matrix elements.
The number of columns is controlled by the CSS variable --c.

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;400&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;400&display=swap&text=∑');

body {
  background: #1f1d2b;
  color: #FFF;
  font-family: 'Roboto Slab', serif;
}

.showcase {
  padding: 15px;
  text-align: center;
  position: relative;
}

.math .frac {
  display: inline-flex;
  vertical-align: middle;
  flex-direction: column;
  text-align: center;
  margin-top: -1px;
}

.math .frac > *:first-child {
  border-bottom: 2px solid currentColor;
  padding-bottom: 5px;
}

.math .frac > *:last-child {
  padding-top: 5px;
}

.math .frac > * {
  padding: 0 0.5em;
}

.math .sqrt {
  border-top: 2px solid currentColor;
  margin-left: 10px;
  padding-left: 5px;
  position: relative;
  display: inline-block;
}

.math .sqrt::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -10px;
  bottom: 0px;
  width: 10px;
  background: currentColor;
  clip-path: polygon(
    0 50%,
    2px 50%,
    50% calc(100% - 2px),
    calc(100% - 2px) 0,
    100% 0,
    100% 2px,
    calc(50% + 2px) 100%,
    calc(50% - 2px) 100%,
    0 calc(50% + 2px)
  );
}

.surround {
  padding: 0 10px;
  position: relative;
  display: inline-block;
  --round: 5px;
  --off: 0;
}

.surround::before {
  content: '';
  width: 5px;
  position: absolute;
  top: 0px;
  left: var(--off);
  bottom: 0px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  border-top-left-radius: var(--round);
  border-bottom-left-radius: var(--round);
}

.surround::after {
  content: '';
  width: 5px;
  position: absolute;
  top: 0px;
  right: var(--off);
  bottom: 0px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-top-right-radius: var(--round);
  border-bottom-right-radius: var(--round);
}

.surround.round {
  --round: 10px 30px;
}

.surround.square {
  --round: 0;
}

.surround.curly {
  --round: 10px;
  --off: 5px;
  padding: 0 15px;
  background-image: 
    linear-gradient(0deg, currentColor 25%, currentColor 25%),
    linear-gradient(0deg, currentColor 25%, currentColor 25%);
  background-repeat: no-repeat;
  background-size: 5px 2px;
  background-position: 0 center, 100% center;
}

.surround.sys {
  --round: 10px;
  --off: 5px;
  padding: 0 15px;
  background-image: 
    linear-gradient(0deg, currentColor 25%, currentColor 25%);
  background-repeat: no-repeat;
  background-size: 5px 2px;
  background-position: 0 center;
}

.surround.sys::after {
  content: unset;
}

.cs {
  position: relative;
  display: inline-block;
}

.cs > sup {
  position: absolute;
  bottom: calc(100% - 10px);
  left: 50%;
  transform: translate(-50%);
  width: max-content;
}

.cs > sub {
  position: absolute;
  top: calc(100% - 5px);
  left: 50%;
  transform: translate(-50%);
  width: max-content;
}

.big {
  font-size: 2em;
  font-weight: 200;
}

.arrow {
  position: relative;
}

.arrow::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 5px);
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
}

.arrow::after {
  content: '';
  position: absolute;
  bottom: calc(100% - 1px);
  right: -1px;
  height: 5px;
  width: 5px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform-origin: top right;
  transform: rotate(45deg);
}

.surround.vec {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
}

.matrix {
  display: inline-grid;
  grid-template-columns: repeat(var(--c), 1fr);
  grid-gap: 5px;
  padding: 5px 15px;
  vertical-align: middle;
}

Final Output:

$math-formulas-and-notations-in-html-and-css.gif$

Read Also how to create pure css responsive navbar.png

Create a Responsive Navbar/Header with Pure CSS

Conclusion:

In conclusion, mastering the creation of mathematical formulas and notations using HTML and CSS opens up new possibilities for web developers. By leveraging these technologies effectively, developers can enhance the educational and informative value of their websites while maintaining accessibility and compatibility standards.

This structured approach provides a comprehensive guide to creating mathematical formulas and notations using HTML and CSS, catering to both beginners and experienced web developers seeking to enrich their web content with mathematical expressions.

Code by: Ivan

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: html math formulas, css math notations, mathml, web math rendering, source code, how to write math formulas in html, css styles for mathematical notations, displaying math equations on web pages, html and css math formatting guide, using mathml for math equations, web development math symbols, mathematical equations web design, latex to html css, how to display math formulas using css, step-by-step html math symbols, css styling for mathematical notation, using latex in web development, tips for html math equation formatting

End of the article

Latest Post

Swinging Pinned Photo Gallery with Scroll Animation using HTML, CSS, and JavaScript

by Faraz - September 17, 2024

Create a stunning swinging pinned photo gallery with scroll-triggered animation using HTML, CSS, and JavaScript.

Loaders

Create an Hourglass Timer Loader using HTML and CSS

September 13, 2024

Countdown

Quick and Easy Countdown Timer with HTML, CSS, and JavaScript

September 13, 2024

Clock

Create Glowing Analog Clock with HTML, CSS, and JavaScript

September 12, 2024

Modal

Create Draggable Modal Using HTML, CSS, and JavaScript

September 03, 2024

Create Animated Logout Button Using HTML and CSS

by Faraz - August 08, 2024

Learn to create an animated logout button using simple HTML and CSS. Follow step-by-step instructions to add smooth animations to your website’s logout button.